<template>
  <div class="form" id="editForm" >
    <h3>这是表单页面 <Icon type="ios-options"  @click="full"/></h3>
    <Split v-model="split1">
             <div class="main p3" slot="left">
                 <Form ref="form" :label-position="form.position" >
                     </FormItem>
      <Row >
        <draggable v-model="list">
          <transition-group>
            <Col v-for="(li, i) in list" :span="li.w" :key="li.dbColumnName"  :distance="1"  :class="{checked:item.dbColumnName==li.dbColumnName}" v-if="!li.hide" >
 <FormItem  :label="li.columnDescription">
<component :is="li.type" v-bind="li.props"></component>

 </FormItem>
 <span class="tool"  @click.stop="selectItem(li,i)">
     <Icon type="md-checkmark-circle" size="24" />
 </span>
            </Col>
          </transition-group>
        </draggable>
      </Row>
       </Form>
    </div>
     <Tabs slot="right">
        <TabPane label="组件" name="component">
<Form ref='' :model='item'  :label-width="80" label-position="right">
  <FormItem label='名称' prop='columnDescription'>
    <span v-text="item.columnDescription"></span>
  </FormItem>
  <FormItem label='组件' prop='control'>
            <Dictionary code="System.DbEnityDefined.Control" v-model="item.control" @on-change="itemSet('control',$event)"></Dictionary>
  </FormItem>
  <FormItem label="宽度">
              <RadioGroup v-model="item.w"  @on-change="itemSet('w',$event)" type="button">
        <Radio :label="24">一</Radio>
        <Radio :label="12">二</Radio>
        <Radio :label="8">三</Radio>
        <Radio :label="6">四</Radio>
        <Radio :label="4">六</Radio>
        <Radio :label="3">八</Radio>
    </RadioGroup>
            </FormItem>
    <FormItem label='默认值' prop='value'>
    <Input type='text' v-model='item.value'  @on-change="itemSet('value',$event)"></Input>
  </FormItem>
      <FormItem label='数据' prop='value'>
    <Input type='text' v-model='item.code' @on-change="itemSet('code',$event)"></Input>
  </FormItem>
      <FormItem label='属性' prop='props'>
    <Input type='textarea' value='item.props' @on-change="itemSet('props',$event)"></Input>
  </FormItem>
   </FormItem>
      <FormItem label="检验" prop='isNullable'>
     <Checkbox :true-value="1" :false-value="0" @on-change="itemSet('isNullable',$event)" v-model="item.isNullable">必填</Checkbox> 
     <Checkbox :true-value="1" :false-value="0" v-model="item.single" @on-change="itemSet('single',$event)">唯一</Checkbox>
  </FormItem>
   </FormItem>
      <FormItem label='校验' prop='single'>
    <Input type='textarea' v-model='item.rule'></Input>
  </FormItem>
</Form>
        </TabPane>
        <TabPane label="表单" name="form">
                    <Form ref='form'>
              <FormItem label="布局">
              <RadioGroup v-model="form.span" type="button">
        <Radio :label="24">一</Radio>
        <Radio :label="12">二</Radio>
        <Radio :label="8">三</Radio>
        <Radio :label="6">四</Radio>
        <Radio :label="4">六</Radio>
        <Radio :label="3">八</Radio>
    </RadioGroup>
            </FormItem>
            <FormItem label="对齐">
              <RadioGroup v-model="form.position" type="button">
        <Radio label="left">左</Radio>
        <Radio label="right">右</Radio>
        <Radio label="top">顶</Radio>
    </RadioGroup>
            </FormItem>
                        <FormItem label="标签">
             <Input-number :max="300" :min="1" v-model="form.width"></Input-number>
            </FormItem>
          </Form>
        </TabPane>
        <TabPane label="字段" name="filed">标签三的内容</TabPane>
    </Tabs>
    </Split>
   
  </div>
</template>

<script>
const constrols = [
        {
          id: 0,
          type: "Input",
          props: {
            type: "text",
          },
        },
        {
          id: 1,
          type: "Input",
          props: {
            type: "textarea",
          },
        },
        {
          id: 2,
          type: "input-number",
        },
        {
          id: 3,
          type: "date-picker",
          props: {
            type: "date",
          },
        },
        {
          id: 4,
          type: "dictionary",
          props: {
            code: `System.DbEnityDefined.Unit`,
          },
        },
        {
          id: 5,
          type: "editor",
          col: {
            span: 24,
          },
        },
        {
          id: 6,
          type: "input-file",
        },
        {
          id: 7,
          type: "input-file",
          props: {},
        },
        {
          id: 8,
          type: "select",
        },
        {
          id: 9,
          type: "input-image",
        },
        {
          id: 10,
          type: "dictionary",
          props: {
            code: `System.DbEnityDefined.Unit`,
          },
        },
        {
          id: 11,
          type: "color-picker",
        },
        {
          id: 12,
          type: "input-icon",
        },
      ];
import screenfull from "screenfull";
import draggable from "vuedraggable";
export default {
  layout:"empty",
  components: {
    draggable,
  },
  name: "",
  data() {
    return {
      form: {
        width: 150,
        position: "left",
        span: 12,
      },
      checked: "",
      split1: 0.8,
      item: {},
      list: [],
      index:-1,
      columns: [
        {
          baseType: 0,
          code: "",
          link: 0,
          propertyType: "",
          scale: 0,
          inputType: 0,
          propertyName: "Name",
          dbColumnName: "Name",
          length: 50,
          columnDescription: "姓名",
          defaultValue: "",
          isNullable: false,
          isIdentity: false,
          isPrimarykey: false,
          isEnableUpdateVersionValidation: false,
          isIgnore: false,
          dataType: "varchar",
          decimalDigits: 0,
          isOnlyIgnoreInsert: false,
          isOnlyIgnoreUpdate: false,
          isTranscoding: false,
          isJson: false,
          noSerialize: false,
          isArray: false,
        },
        {
          baseType: 0,
          code: "",
          link: 0,
          propertyType: "",
          scale: 0,
          inputType: 0,
          propertyName: "Phone",
          dbColumnName: "Phone",
          length: 50,
          columnDescription: "手机",
          defaultValue: "",
          isNullable: false,
          isIdentity: false,
          isPrimarykey: false,
          isEnableUpdateVersionValidation: false,
          isIgnore: false,
          dataType: "varchar",
          decimalDigits: 0,
          isOnlyIgnoreInsert: false,
          isOnlyIgnoreUpdate: false,
          isTranscoding: false,
          isJson: false,
          noSerialize: false,
          isArray: false,
        },
        {
          baseType: 0,
          code: "",
          link: 0,
          propertyType: "",
          scale: 0,
          inputType: 0,
          propertyName: "CardNo",
          dbColumnName: "CardNo",
          length: 50,
          columnDescription: "身份证号",
          defaultValue: "",
          isNullable: false,
          isIdentity: false,
          isPrimarykey: false,
          isEnableUpdateVersionValidation: false,
          isIgnore: false,
          dataType: "varchar",
          decimalDigits: 0,
          isOnlyIgnoreInsert: false,
          isOnlyIgnoreUpdate: false,
          isTranscoding: false,
          isJson: false,
          noSerialize: false,
          isArray: false,
        },
        {
          baseType: 0,
          code: "",
          link: 0,
          propertyType: "",
          scale: 0,
          inputType: 0,
          propertyName: "Email",
          dbColumnName: "Email",
          length: 50,
          columnDescription: "邮箱",
          defaultValue: "",
          isNullable: false,
          isIdentity: false,
          isPrimarykey: false,
          isEnableUpdateVersionValidation: false,
          isIgnore: false,
          dataType: "varchar",
          decimalDigits: 0,
          isOnlyIgnoreInsert: false,
          isOnlyIgnoreUpdate: false,
          isTranscoding: false,
          isJson: false,
          noSerialize: false,
          isArray: false,
        },
        {
          baseType: 0,
          code: "",
          link: 0,
          propertyType: "",
          scale: 0,
          inputType: 5,
          propertyName: "Content",
          dbColumnName: "Content",
          length: 0,
          columnDescription: "介绍",
          defaultValue: "",
          isNullable: true,
          isIdentity: false,
          isPrimarykey: false,
          isEnableUpdateVersionValidation: false,
          isIgnore: false,
          dataType: "text",
          decimalDigits: 0,
          isOnlyIgnoreInsert: false,
          isOnlyIgnoreUpdate: false,
          isTranscoding: false,
          isJson: false,
          noSerialize: false,
          isArray: false,
        },
        {
          baseType: 0,
          code: "",
          link: 0,
          propertyType: "",
          scale: 0,
          inputType: 4,
          propertyName: "Gender",
          dbColumnName: "Gender",
          length: 0,
          columnDescription: "性别",
          defaultValue: "",
          isNullable: true,
          isIdentity: false,
          isPrimarykey: false,
          isEnableUpdateVersionValidation: false,
          isIgnore: false,
          dataType: "smallint",
          decimalDigits: 0,
          isOnlyIgnoreInsert: false,
          isOnlyIgnoreUpdate: false,
          isTranscoding: false,
          isJson: false,
          noSerialize: false,
          isArray: false,
        },
        {
          baseType: 0,
          code: "",
          link: 0,
          propertyType: "",
          scale: 0,
          inputType: 3,
          propertyName: "Birthday",
          dbColumnName: "Birthday",
          length: 0,
          columnDescription: "生日",
          defaultValue: "",
          isNullable: true,
          isIdentity: false,
          isPrimarykey: false,
          isEnableUpdateVersionValidation: false,
          isIgnore: false,
          dataType: "datetime",
          decimalDigits: 0,
          isOnlyIgnoreInsert: false,
          isOnlyIgnoreUpdate: false,
          isTranscoding: false,
          isJson: false,
          noSerialize: false,
          isArray: false,
        },
        {
          baseType: 0,
          code: "",
          link: 0,
          propertyType: "",
          scale: 0,
          inputType: 2,
          propertyName: "Hight",
          dbColumnName: "Hight",
          length: 0,
          columnDescription: "身高",
          defaultValue: "",
          isNullable: true,
          isIdentity: false,
          isPrimarykey: false,
          isEnableUpdateVersionValidation: false,
          isIgnore: false,
          dataType: "int",
          decimalDigits: 0,
          isOnlyIgnoreInsert: false,
          isOnlyIgnoreUpdate: false,
          isTranscoding: false,
          isJson: false,
          noSerialize: false,
          isArray: false,
        },
        {
          baseType: 0,
          code: "",
          link: 0,
          propertyType: "",
          scale: 0,
          inputType: 2,
          propertyName: "Weight",
          dbColumnName: "Weight",
          length: 0,
          columnDescription: "体重",
          defaultValue: "",
          isNullable: true,
          isIdentity: false,
          isPrimarykey: false,
          isEnableUpdateVersionValidation: false,
          isIgnore: false,
          dataType: "int",
          decimalDigits: 0,
          isOnlyIgnoreInsert: false,
          isOnlyIgnoreUpdate: false,
          isTranscoding: false,
          isJson: false,
          noSerialize: false,
          isArray: false,
        },
        {
          baseType: 0,
          code: "",
          link: 1,
          propertyType: "",
          scale: 0,
          inputType: 0,
          propertyName: "DepartmentId",
          dbColumnName: "DepartmentId",
          length: 52,
          columnDescription: "部门",
          defaultValue: "",
          isNullable: true,
          isIdentity: false,
          isPrimarykey: false,
          isEnableUpdateVersionValidation: false,
          isIgnore: false,
          dataType: "varchar",
          decimalDigits: 0,
          isOnlyIgnoreInsert: false,
          isOnlyIgnoreUpdate: false,
          isTranscoding: false,
          isJson: false,
          noSerialize: false,
          isArray: false,
        },
        {
          baseType: 0,
          code: "",
          link: 0,
          propertyType: "",
          scale: 0,
          inputType: 0,
          propertyName: "DepartmentTitle",
          dbColumnName: "DepartmentTitle",
          length: 50,
          columnDescription: "部门名称",
          defaultValue: "",
          isNullable: true,
          isIdentity: false,
          isPrimarykey: false,
          isEnableUpdateVersionValidation: false,
          isIgnore: false,
          dataType: "varchar",
          decimalDigits: 0,
          isOnlyIgnoreInsert: false,
          isOnlyIgnoreUpdate: false,
          isTranscoding: false,
          isJson: false,
          noSerialize: false,
          isArray: false,
        },
        {
          baseType: 0,
          code: "",
          link: 0,
          propertyType: "",
          scale: 0,
          inputType: 10,
          propertyName: "Face",
          dbColumnName: "Face",
          length: 50,
          columnDescription: "头像",
          defaultValue: "",
          isNullable: true,
          isIdentity: false,
          isPrimarykey: false,
          isEnableUpdateVersionValidation: false,
          isIgnore: false,
          dataType: "varchar",
          decimalDigits: 0,
          isOnlyIgnoreInsert: false,
          isOnlyIgnoreUpdate: false,
          isTranscoding: false,
          isJson: false,
          noSerialize: false,
          isArray: false,
        },
        {
          baseType: 0,
          code: "",
          link: 0,
          propertyType: "",
          scale: 0,
          inputType: 7,
          propertyName: "Attachment",
          dbColumnName: "Attachment",
          length: 51,
          columnDescription: "附件",
          defaultValue: "",
          isNullable: true,
          isIdentity: false,
          isPrimarykey: false,
          isEnableUpdateVersionValidation: false,
          isIgnore: false,
          dataType: "varchar",
          decimalDigits: 0,
          isOnlyIgnoreInsert: false,
          isOnlyIgnoreUpdate: false,
          isTranscoding: false,
          isJson: false,
          noSerialize: false,
          isArray: false,
        },
        {
          baseType: 0,
          code: "",
          link: 0,
          propertyType: "",
          scale: 0,
          inputType: 0,
          propertyName: "Address",
          dbColumnName: "Address",
          length: 50,
          columnDescription: "地址",
          defaultValue: "",
          isNullable: true,
          isIdentity: false,
          isPrimarykey: false,
          isEnableUpdateVersionValidation: false,
          isIgnore: false,
          dataType: "varchar",
          decimalDigits: 0,
          isOnlyIgnoreInsert: false,
          isOnlyIgnoreUpdate: false,
          isTranscoding: false,
          isJson: false,
          noSerialize: false,
          isArray: false,
        },
        {
          baseType: 0,
          code: "",
          link: 0,
          propertyType: "",
          scale: 0,
          inputType: 0,
          propertyName: "Note",
          dbColumnName: "Note",
          length: 2000,
          columnDescription: "座右铭",
          defaultValue: "",
          isNullable: true,
          isIdentity: false,
          isPrimarykey: false,
          isEnableUpdateVersionValidation: false,
          isIgnore: false,
          dataType: "varchar",
          decimalDigits: 0,
          isOnlyIgnoreInsert: false,
          isOnlyIgnoreUpdate: false,
          isTranscoding: false,
          isJson: false,
          noSerialize: false,
          isArray: false,
        },
        {
          baseType: 0,
          code: "",
          link: 0,
          propertyType: "",
          scale: 0,
          inputType: 11,
          propertyName: "Likes",
          dbColumnName: "Likes",
          length: 200,
          columnDescription: "爱好",
          defaultValue: "",
          isNullable: true,
          isIdentity: false,
          isPrimarykey: false,
          isEnableUpdateVersionValidation: false,
          isIgnore: false,
          dataType: "varchar",
          decimalDigits: 0,
          isOnlyIgnoreInsert: false,
          isOnlyIgnoreUpdate: false,
          isTranscoding: false,
          isJson: false,
          noSerialize: false,
          isArray: false,
        },
        {
          baseType: 0,
          code: "",
          link: 0,
          propertyType: "",
          scale: 0,
          inputType: 9,
          propertyName: "Skills",
          dbColumnName: "Skills",
          length: 50,
          columnDescription: "技能",
          defaultValue: "",
          isNullable: true,
          isIdentity: false,
          isPrimarykey: false,
          isEnableUpdateVersionValidation: false,
          isIgnore: false,
          dataType: "varchar",
          decimalDigits: 0,
          isOnlyIgnoreInsert: false,
          isOnlyIgnoreUpdate: false,
          isTranscoding: false,
          isJson: false,
          noSerialize: false,
          isArray: false,
        },
        {
          baseType: 0,
          code: "",
          link: 1,
          propertyType: "",
          scale: 0,
          inputType: 8,
          propertyName: "RoleIds",
          dbColumnName: "RoleIds",
          length: 52,
          columnDescription: "角色Id",
          defaultValue: "",
          isNullable: true,
          isIdentity: false,
          isPrimarykey: false,
          isEnableUpdateVersionValidation: false,
          isIgnore: false,
          dataType: "varchar",
          decimalDigits: 0,
          isOnlyIgnoreInsert: false,
          isOnlyIgnoreUpdate: false,
          isTranscoding: false,
          isJson: false,
          noSerialize: false,
          isArray: false,
        },
        {
          baseType: 0,
          code: "",
          link: 0,
          propertyType: "",
          scale: 0,
          inputType: 9,
          propertyName: "RoleTiltles",
          dbColumnName: "RoleTiltles",
          length: 1000,
          columnDescription: "角色",
          defaultValue: "",
          isNullable: true,
          isIdentity: false,
          isPrimarykey: false,
          isEnableUpdateVersionValidation: false,
          isIgnore: false,
          dataType: "varchar",
          decimalDigits: 0,
          isOnlyIgnoreInsert: false,
          isOnlyIgnoreUpdate: false,
          isTranscoding: false,
          isJson: false,
          noSerialize: false,
          isArray: false,
        },
        {
          single: 0,
          baseType: 0,
          code: "",
          link: 0,
          propertyType: "",
          scale: 0,
          inputType: 12,
          propertyName: "Icon",
          dbColumnName: "Icon",
          length: 50,
          columnDescription: "图标",
          defaultValue: "",
          isNullable: true,
          isIdentity: false,
          isPrimarykey: false,
          isEnableUpdateVersionValidation: false,
          isIgnore: false,
          dataType: "varchar",
          decimalDigits: 0,
          isOnlyIgnoreInsert: false,
          isOnlyIgnoreUpdate: false,
          isTranscoding: false,
          isJson: false,
          noSerialize: false,
          isArray: false,
        },
        {
          single: 0,
          baseType: 2,
          code: "",
          link: 0,
          propertyType: "",
          scale: 0,
          inputType: 0,
          propertyName: "Id",
          dbColumnName: "Id",
          length: 50,
          columnDescription: "Id",
          defaultValue: "",
          isNullable: false,
          isIdentity: false,
          isPrimarykey: true,
          isEnableUpdateVersionValidation: false,
          isIgnore: false,
          dataType: "varchar",
          decimalDigits: 0,
          isOnlyIgnoreInsert: false,
          isOnlyIgnoreUpdate: false,
          isTranscoding: false,
          isJson: false,
          noSerialize: false,
          isArray: false,
        },
        {
          single: 0,
          baseType: 2,
          code: "",
          link: 0,
          propertyType: "",
          scale: 0,
          inputType: 0,
          propertyName: "CreationTime",
          dbColumnName: "CreationTime",
          length: 0,
          columnDescription: "创建时间",
          defaultValue: "",
          isNullable: true,
          isIdentity: false,
          isPrimarykey: false,
          isEnableUpdateVersionValidation: false,
          isIgnore: false,
          dataType: "datetime",
          decimalDigits: 0,
          isOnlyIgnoreInsert: false,
          isOnlyIgnoreUpdate: false,
          isTranscoding: false,
          isJson: false,
          noSerialize: false,
          isArray: false,
        },
        {
          single: 0,
          baseType: 2,
          code: "",
          link: 0,
          propertyType: "",
          scale: 0,
          inputType: 0,
          propertyName: "CreatorUserId",
          dbColumnName: "CreatorUserId",
          length: 50,
          columnDescription: "创建人",
          defaultValue: "",
          isNullable: true,
          isIdentity: false,
          isPrimarykey: false,
          isEnableUpdateVersionValidation: false,
          isIgnore: false,
          dataType: "varchar",
          decimalDigits: 0,
          isOnlyIgnoreInsert: false,
          isOnlyIgnoreUpdate: false,
          isTranscoding: false,
          isJson: false,
          noSerialize: false,
          isArray: false,
        },
        {
          single: 0,
          baseType: 2,
          code: "",
          link: 0,
          propertyType: "",
          scale: 0,
          inputType: 0,
          propertyName: "LastModificationTime",
          dbColumnName: "LastModificationTime",
          length: 0,
          columnDescription: "更新时间",
          defaultValue: "",
          isNullable: true,
          isIdentity: false,
          isPrimarykey: false,
          isEnableUpdateVersionValidation: false,
          isIgnore: false,
          dataType: "datetime",
          decimalDigits: 0,
          isOnlyIgnoreInsert: false,
          isOnlyIgnoreUpdate: false,
          isTranscoding: false,
          isJson: false,
          noSerialize: false,
          isArray: false,
        },
        {
          single: 0,
          baseType: 2,
          code: "",
          link: 0,
          propertyType: "",
          scale: 0,
          inputType: 0,
          propertyName: "LastModifierUserId",
          dbColumnName: "LastModifierUserId",
          length: 50,
          columnDescription: "更新人",
          defaultValue: "",
          isNullable: true,
          isIdentity: false,
          isPrimarykey: false,
          isEnableUpdateVersionValidation: false,
          isIgnore: false,
          dataType: "varchar",
          decimalDigits: 0,
          isOnlyIgnoreInsert: false,
          isOnlyIgnoreUpdate: false,
          isTranscoding: false,
          isJson: false,
          noSerialize: false,
          isArray: false,
        },
        {
          single: 0,
          baseType: 2,
          code: "",
          link: 0,
          propertyType: "",
          scale: 0,
          inputType: 0,
          propertyName: "DeletionTime",
          dbColumnName: "DeletionTime",
          length: 0,
          columnDescription: "删除时间",
          defaultValue: "",
          isNullable: true,
          isIdentity: false,
          isPrimarykey: false,
          isEnableUpdateVersionValidation: false,
          isIgnore: false,
          dataType: "datetime",
          decimalDigits: 0,
          isOnlyIgnoreInsert: false,
          isOnlyIgnoreUpdate: false,
          isTranscoding: false,
          isJson: false,
          noSerialize: false,
          isArray: false,
        },
        {
          single: 0,
          baseType: 2,
          code: "",
          link: 0,
          propertyType: "",
          scale: 0,
          inputType: 0,
          propertyName: "DeleterUserId",
          dbColumnName: "DeleterUserId",
          length: 50,
          columnDescription: "删除人",
          defaultValue: "",
          isNullable: true,
          isIdentity: false,
          isPrimarykey: false,
          isEnableUpdateVersionValidation: false,
          isIgnore: false,
          dataType: "varchar",
          decimalDigits: 0,
          isOnlyIgnoreInsert: false,
          isOnlyIgnoreUpdate: false,
          isTranscoding: false,
          isJson: false,
          noSerialize: false,
          isArray: false,
        },
        {
          single: 0,
          baseType: 2,
          code: "",
          link: 0,
          propertyType: "",
          scale: 0,
          inputType: 4,
          propertyName: "IsDeleted",
          dbColumnName: "IsDeleted",
          length: 0,
          columnDescription: "是否删除",
          defaultValue: "",
          isNullable: false,
          isIdentity: false,
          isPrimarykey: false,
          isEnableUpdateVersionValidation: false,
          isIgnore: false,
          dataType: "smallint",
          decimalDigits: 0,
          isOnlyIgnoreInsert: false,
          isOnlyIgnoreUpdate: false,
          isTranscoding: false,
          isJson: false,
          noSerialize: false,
          isArray: false,
        },
      ],
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.list = this.columns
        .filter((u) => {
          return u.baseType < 2;
        })
        .map((u) => {
          let col = {
            dbColumnName: u.dbColumnName,
            columnDescription: u.columnDescription,
            control:u.inputType,
            h: 40,
            w: 12,
            hide: false,
            props: {},
          };
          this.getInputType(col, u);
          return col;
        });
    },
    selectItem(li,index) {
      console.warn(li);
      this.index=index;
      this.item = this.$u.clone(li);
    },
    itemSet(filed,value){
      // if(this.index>-1){
       
      //   this.$set(this.list,this.index,this.item);
      //   console.warn(filed,value,this.list[this.index])
      // } 
      this.item.type=constrols[this.item.control].type;
      // this.item.w=99;
      this.item.props=constrols[this.item.control].type;
      this.$set(this.list,this.index,this.item);
    },
    full() {
      var editor = document.getElementById("editForm");
      screenfull.toggle(editor);
    },
    getValueType(item) {
      let type = "string";
      if (["smallint", "int", "bigint"].indexOf(item.dataType) > -1) {
        type = "number";
      }
      return type;
    },
    getInputType(item, u) {
     
      if (u.inputType < constrols.length) {
        item = Object.assign(item, constrols[u.inputType]);
      } else {
        item = Object.assign(item, constrols[0]);
      }
      delete item.id;
    },
  },
};
</script>

<style lang="less">
@border-color: transparent;
// @border-color:#ddd;
@border-color-null: transparent;
.form {
  background-color: #f1f2f3;
}
.main {
  .ivu-row {
    border: 1px solid @border-color;
    //    border-right: 1px solid #ddd;
    .ivu-col {
      position: relative;
      border: 1px solid @border-color;
      padding: 0 10px;
      margin-left: -1px;
      //   margin-right: 1px;
      margin-top: -1px;
      //   margin-bottom: 1px;
      //   border-left: 1px solid #ddd;
      //   border-left: 1px solid #ddd;
      //   border-bottom: 1px solid #ddd;
      //   border-top: 1px solid transparent;
      //   border-right: 1px solid transparent;
      .ivu-form-item {
        margin-bottom: 10px;
      }
      &:hover {
        border: 1px solid #ddd;
        background: #f7f7f7;

        .tool {
          display: inline-block;
        }
      }
      span.tool {
        position: absolute;
        width: 15px;
        height: 15px;
        text-align: center;
        right: 0;
        bottom: 0;
        z-index: 99;
        display: none;
      }
      &.checked {
        border: 1px solid rgb(18, 177, 240);
        background: rgba(18, 177, 240, 0.1);

        // .tool{
        //     display: inline-block;
        // }
      }
      .flex {
        > label {
          flex-shrink: 0;
          width: 150px;
          text-align: right;
          background: #f7f7f7;
          border-right: 1px solid #ddd;
          padding: 0 10px;
        }
      }
    }
  }
}
</style>